<!doctype html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>-uu-box-shadow: + grad</title>
<style>
@import url(reset.css);

html.ifie6 .view, html.ifie7 .view{
/*
  border: 1px solid red;
 */
}
.view {
  padding: 25px; /* shadow padding */
  outline: 1px solid red;
}
.noshadow {
  outline: 1px solid blue;
}
.boxshadow1 {
  border: 5px solid skyblue;
  -uu-box-shadow: steelblue 5px 5px 20px;
}
.boxshadow4 {
  margin: 10px;
  padding: 10px;
  border: 1px solid navy;
  -uu-box-shadow: blue 0px 0px 5px;
}
.boxshadow7 {
  margin: 1px;
  padding: 1px;
  border: 0 none transparent;
  -uu-box-shadow: blue 0px 0px 5px;
}
.radius1 {
  color: gold;
  -uu-background: blue url(../../img/lena.jpg) repeat top left;
  border: 1em solid navy;
  border-top: 20px solid navy;
  border-right: 2px solid blue;
  border-bottom: 2px solid green;
  border-left: 20px solid #0011ff;
  -uu-border-radius: 5em;
}
.simpleradius1 {
  -uu-border-radius: 5em;
}
.lena {
  -uu-background-image: url(../../img/lena.jpg);
}
.noborder {
  border: 0em none;
}
.nobgimg {
  -uu-background-image: none;
}
.nobgcolor {
  -uu-background-color: transparent;
}
.grad2 {
  -uu-background-image: -uu-gradient(linear, right top, left bottom,
                                 from(#66ff00),
                                 color-stop(0.3, #ffff00),
                                 color-stop(0.7, #ff00ff),
                                 to(#00aaff));
}
</style>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script>
window.UUMETA_DEBUG = 1
</script>
<script src="../../uuAltCSS.js"></script>

</head>
<body>
<input type="button" value="revalidate" onclick="uuAltCSS()" />

<hr />
<h1>-uu-box-shadow: + grad</h1>



<div class="view">
  <div class="noshadow"><pre>
.noshadow {
  outline: 1px solid blue;
}</pre></div></div>

<div class="view">
  <div class="boxshadow4"><pre>
.boxshadow4 {
  margin: 10px;
  padding: 10px;
  border: 1px solid navy;
  -uu-box-shadow: blue 0px 0px 5px;
}</pre></div>
</div>

<div class="view"><div class="boxshadow7"><pre>
.boxshadow7 {
  margin: 1px;
  padding: 1px;
  border: 0 none transparent;
  -uu-box-shadow: blue 0px 0px 5px;
}</pre></div></div>


<div class="view">
  <div class="boxshadow1"><pre>
.boxshadow1 {
  border: 5px solid skyblue;
  -uu-box-shadow: steelblue 5px 5px 20px;
}</pre></div>
</div>


<div class="view">
  <div class="boxshadow1 simpleradius1"><pre>
.boxshadow1 {
  border: 5px solid skyblue;
  -uu-box-shadow: steelblue 5px 5px 20px;
}
.simpleradius1 {
  -uu-border-radius: 5em;
}</pre></div>
</div>



<div class="view">
  <div class="boxshadow1 simpleradius1 lena"><pre>
.boxshadow1 {
  border: 5px solid skyblue;
  -uu-box-shadow: steelblue 5px 5px 20px;
}
.simpleradius1 {
  -uu-border-radius: 5em;
}
.lena {
  -uu-background-image: url(../../img/lena.jpg);
}</pre></div>
</div>



<div class="view">
  <div class="boxshadow1 radius1"><pre>
.boxshadow1 {
  border: 5px solid skyblue;
  -uu-box-shadow: steelblue 5px 5px 20px;
}
.radius1 {
  color: gold;
  -uu-background: blue url(../../img/lena.jpg) repeat top left;
  border: 1em solid navy;
  border-top: 20px solid navy;
  border-right: 2px solid blue;
  border-bottom: 2px solid green;
  border-left: 20px solid #0011ff;
  -uu-border-radius: 5em;
}</pre></div>
</div>


<div class="view">
  <div class="boxshadow1 radius1 noborder"><pre>
.boxshadow1 {
  border: 5px solid skyblue;
  -uu-box-shadow: steelblue 5px 5px 20px;
}
.radius1 {
  color: gold;
  -uu-background: blue url(../../img/lena.jpg) repeat top left;
  border: 1em solid navy;
  border-top: 20px solid navy;
  border-right: 2px solid blue;
  border-bottom: 2px solid green;
  border-left: 20px solid #0011ff;
  -uu-border-radius: 5em;
}
.noborder {
  border: 0em none;
}</pre></div>
</div>



<div class="view">
  <div class="boxshadow1 radius1 noborder nobgimg"><pre>
.boxshadow1 {
  border: 5px solid skyblue;
  -uu-box-shadow: steelblue 5px 5px 10px;
}
.radius1 {
  color: gold;
  -uu-background: blue url(../../img/lena.jpg) repeat top left;
  border: 1em solid navy;
  border-top: 20px solid navy;
  border-right: 2px solid blue;
  border-bottom: 2px solid green;
  border-left: 20px solid #0011ff;
  -uu-border-radius: 5em;
}
.noborder {
  border: 0em none;
}
.nobgimg {
  -uu-background-image: none;
}</pre></div>
</div>






<div class="view">
  <div class="boxshadow1 radius1 noborder nobgimg grad2"><pre>
.boxshadow1 {
  border: 5px solid skyblue;
  -uu-box-shadow: steelblue 5px 5px 10px;
}
.radius1 {
  color: gold;
  -uu-background: blue url(../../img/lena.jpg) repeat top left;
  border: 1em solid navy;
  border-top: 20px solid navy;
  border-right: 2px solid blue;
  border-bottom: 2px solid green;
  border-left: 20px solid #0011ff;
  -uu-border-radius: 5em;
}
.noborder {
  border: 0em none;
}
.nobgimg {
  -uu-background-image: none;
}
.grad2 {
  -uu-background-image: -uu-gradient(linear, right top, left bottom,
                                 from(#66ff00),
                                 color-stop(0.3, #ffff00),
                                 color-stop(0.7, #ff00ff),
                                 to(#00aaff));
}</pre></div>
</div>





<div class="view">
  <div class="boxshadow1 radius1 grad2"><pre>
.boxshadow1 {
  border: 5px solid skyblue;
  -uu-box-shadow: steelblue 5px 5px 20px;
}
.radius1 {
  color: gold;
  -uu-background: blue url(../../img/lena.jpg) repeat top left;
  border: 1em solid navy;
  border-top: 20px solid navy;
  border-right: 2px solid blue;
  border-bottom: 2px solid green;
  border-left: 20px solid #0011ff;
  -uu-border-radius: 5em;
}
.grad2 {
  -uu-background-image: -uu-gradient(linear, right top, left bottom,
                                 from(#66ff00),
                                 color-stop(0.3, #ffff00),
                                 color-stop(0.7, #ff00ff),
                                 to(#00aaff));

}</pre></div>
</div>


</body>
</html>